 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Microsoft YaHei", sans-serif;
 }

 body {
     /* background: linear-gradient(135deg, #0a1a35 0%, #1a3a5f 100%); */
     background-image:
         url('../img/bg2.jpg'),
         /* 背景图片 */
         linear-gradient(135deg, #0a1a35 0%, #1a3a5f 100%);
         
     /* 线性渐变 */
     background-size: cover;
     color: #fff;
     padding: 40px;
     overflow-x: hidden;
     min-height: 100vh;
 }

 .header {

     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding: 15px 20px;
     /* background: rgba(16, 33, 68, 0.7); */
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .title {
     font-size: 32px;
     font-weight: bold;
     background: linear-gradient(to right, #4facfe, #00f2fe);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
 }

 .time-info {
     font-size: 18px;
     color: #a0a8b6;
     padding: 8px 15px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 5px;
 }

 .dashboard {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
     gap: 20px;
     grid-template-areas:
         "stats stats stats stats"
         "wordcloud wordcloud trend trend"
         "bar bar radar radar"
         "category scatter news news"
         "map map map map";
 }

 .card {
     background: rgba(16, 33, 68, 0.7);
     border-radius: 10px;
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .card-title {
     font-size: 18px;
     font-weight: bold;
     color: #4facfe;
 }

 .card-tool {
     color: #a0a8b6;
     font-size: 14px;
     cursor: pointer;
 }

 .stats-container {
     grid-area: stats;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
 }

 .stat-item {
     background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
     /* background-image: url(农学院.jpg); */
     border-radius: 8px;
     padding: 20px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .stat-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
     transform: translateY(100%);
     transition: transform 0.5s ease;
 }

 .stat-item:hover::before {
     transform: translateY(0);
 }

 .stat-icon {
     font-size: 24px;
     margin-bottom: 10px;
     color: #4facfe;
 }

 .stat-value {
     font-size: 32px;
     font-weight: bold;
     margin: 10px 0;
     color: #00f2fe;
     text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
 }

 .stat-label {
     font-size: 14px;
     color: #a0a8b6;
 }

 .stat-trend {
     font-size: 12px;
     margin-top: 5px;
     color: #43e97b;
 }

 .wordcloud-container {
     grid-area: wordcloud;
     height: 400px;
 }

 .trend-container {
     grid-area: trend;
     height: 400px;
 }

 .bar-container {
     grid-area: bar;
     height: 400px;
 }

 .radar-container {
     grid-area: radar;
     height: 400px;
 }

 .category-container {
     grid-area: category;
     height: 400px;
 }

 .scatter-container {
     grid-area: scatter;
     height: 400px;
 }

 .news-container {
     grid-area: news;
     height: 400px;
 }

 .map-container {
     grid-area: map;
     height: 400px;
 }

 .chart {
     width: 100%;
     height: calc(100% - 40px);
 }

 .news-list {
     height: calc(100% - 40px);
     overflow-y: auto;
     padding-right: 5px;
 }

 .news-list::-webkit-scrollbar {
     width: 6px;
 }

 .news-list::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 3px;
 }

 .news-list::-webkit-scrollbar-thumb {
     background: #4facfe;
     border-radius: 3px;
 }

 .news-item {
     padding: 12px 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background 0.3s ease;
 }

 .news-item:hover {
     background: rgba(255, 255, 255, 0.05);
 }

 .news-item:last-child {
     border-bottom: none;
 }

 .news-title {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-right: 15px;
     font-size: 14px;
 }

 .news-time {
     color: #a0a8b6;
     font-size: 12px;
     min-width: 80px;
 }

 .news-views {
     color: #4facfe;
     font-weight: bold;
     margin-left: 15px;
     min-width: 40px;
     text-align: right;
 }

 .footer {
     margin-top: 20px;
     text-align: center;
     padding: 15px;
     color: #a0a8b6;
     font-size: 14px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* 响应式调整 */
 @media (max-width: 1400px) {
     .dashboard {
         grid-template-columns: repeat(3, 1fr);
         grid-template-areas:
             "stats stats stats"
             "wordcloud trend trend"
             "bar bar radar"
             "category scatter news"
             "map map map";
     }
 }

 @media (max-width: 1200px) {
     .dashboard {
         grid-template-columns: repeat(2, 1fr);
         grid-template-areas:
             "stats stats"
             "wordcloud trend"
             "bar radar"
             "category scatter"
             "news news"
             "map map";
     }

     .stats-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .dashboard {
         grid-template-columns: 1fr;
         grid-template-areas:
             "stats"
             "wordcloud"
             "trend"
             "bar"
             "radar"
             "category"
             "scatter"
             "news"
             "map";
     }

     .stats-container {
         grid-template-columns: 1fr;
     }

     .header {
         flex-direction: column;
         gap: 10px;
     }

     .title {
         font-size: 24px;
     }
 }

 .loading {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     font-size: 16px;
     color: #a0a8b6;
 }

 .pulse {
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         opacity: 0.6;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0.6;
     }
 }